import React,{Suspense} from 'react'
import {
    BrowserRouter,
    Route,
    Routes,
    Navigate,
} from 'react-router-dom'

import routes from './routerConfig';
import {ROUTERTYPES} from '../types/router.d'



function routerViews() {
    const renderDom=(routes:ROUTERTYPES[])=>{
       return routes.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to}/>:<item.component/>}>
                {
                    item.children && renderDom(item.children)
                }
            </Route>
        })
    }



  return (
    <BrowserRouter>
             <Suspense fallback={<div>路由加载中。。。</div>}>
                <Routes>
                    {
                        renderDom(routes)
                    }
                </Routes>
            </Suspense>
    </BrowserRouter>
   
  )
}

export default routerViews